import {View} from "@tarojs/components";
import {Image} from "@antmjs/vantui";
import {Component} from 'react'
import {inject, observer} from "mobx-react";

export interface GoodsItem {
  image: '',
  price: '',
}

export interface HotItemProps {
  mainTitle: string,
  subTitle: string,
  goodsItems: Array<GoodsItem>,
}

export default class HotItem extends Component<HotItemProps> {
  render() {
    if (!this.props.goodsItems || this.props.goodsItems.length < 2) {
      return <View></View>
    }

    return <View className='hot-area-item'>
      <View className='hot-area-item-title'>
        <View className='main-title'>
          {this.props.mainTitle}
        </View>
        <View className='sub-title'>
          {this.props.subTitle}
        </View>
      </View>
      <View className='goods-items'>
        <View className='goods-item'>
          <View className='goods-item-image'>
            <Image
              src={this.props.goodsItems[0].image}
            ></Image>
          </View>
          <View className='goods-item-price'>￥{this.props.goodsItems[0].price}</View>
        </View>
        <View className='goods-item'>
          <View className='goods-item-image'>
            <Image
              src={this.props.goodsItems[1].image}
            ></Image>
          </View>
          <View className='goods-item-price'>￥{this.props.goodsItems[1].price}</View>
        </View>
      </View>
    </View>
  }
}
